<template>
  <!-- 地图 -->
  <img src="@/assets/img/gisPage/header-bg.png" class="header-bg" alt="" />
  <div class="gis-page">
    <gis @drawPolygon="drawPolygon" ref="childRef" />
    <gisHouseAnalysAlert></gisHouseAnalysAlert>
    <!-- <coverage v-if="coverageShow"></coverage> -->
    <parkList></parkList>
    <!-- <priceTrend /> -->
    <proportion />
    <infor v-if="inforShow" @inforOffla="inforOffla" />
  </div>
  <div class="iframe-box" v-if="vrUrl">
    <iframe :src="tabActive == 0 ? vrUrl : vrQsUrl" class="iframe-style" frameborder="0"></iframe>
    <div class="btn-box">
      <div class="btn-box-l">
        <p @click="tabChange(index)" v-for="(item, index) in vrArr" :key="index" :class="tabActive == index ? 'active-tab' : ''">{{ item }}</p>
      </div>
      <p @click="closeVR()">关闭</p>
    </div>
  </div>
</template>
<script setup lang="ts">
import gis from "@/components/gisPage/gis.vue";
import parkList from "@/components/gisPage/parkList.vue";
import busEmitter from "@/utils/bus";
// import priceTrend from "@/components/gisPage/priceTrend.vue";
import infor from "@/components/gisPage/infor.vue";
import coverage from "@/components/gisHouseAnalysAlert/coverage.vue";
import gisHouseAnalysAlert from "@/components/gisHouseAnalysAlert/gisHouseAnalysAlert.vue";
import { ref } from "vue";
const childRef = ref(null);
const drawPolygonShow = ref(false);
const inforShow = ref(false);
const coverageShow = ref(true);
const vrUrl = ref<any>(null);
const vrQsUrl = ref<any>(null);
const tabActive = ref(0);
const vrArr = ref(["精装", "清水"]);
// 1地图画线   2园区详情   3退出画线
const drawPolygon = (num: any) => {
  if (num == 1) {
    drawPolygonShow.value = false;
    inforShow.value = false;
    coverageShow.value = false;
  } else if (num == 2) {
    inforShow.value = true;
  } else if (num == 3) {
    coverageShow.value = true;
  }
};

const inforOffla = () => {
  inforShow.value = false;
};
busEmitter.on("setVrUrl", (url: any) => {
  vrUrl.value = url.url;
  vrQsUrl.value = url.qsUrl;
  tabActive.value = 0;
});
const closeVR = () => {
  vrUrl.value = null;
  vrQsUrl.value = null;
};

const tabChange = (index: any) => {
  tabActive.value = index;
};
</script>

<style scoped lang="less">
.header-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 83px;
  z-index: 10000;
}

/deep/ .el-overlay {
  z-index: 99999 !important;

  .gis-assess-dialog {
    .el-dialog__header {
      padding-right: 0;
    }
  }
}

.btn-show {
  position: fixed;
  top: 60px;
  right: 55px;
  z-index: 99999;
}

.iframe-box {
  position: fixed;
  top: 460px;
  left: 51%;
  transform: translate(-51%, -50%);
  z-index: 999999;
  display: flex;
  .iframe-style {
    width: 1000px;
    height: 700px;
  }
  .btn-box {
    font-size: 28px;
    position: fixed;
    top: -24px;
    right: 0;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    .btn-box-l {
      display: flex;
      align-items: center;
      p {
        margin-right: 10px;
        margin-left: 0;
      }
      .active-tab {
        background: linear-gradient(180deg, #da9860 0%, #a0897c 100%);
        color: #ffffff;
      }
    }
    p {
      width: 83px;
      height: 22px;
      background: linear-gradient(180deg, #9fc0f3 0%, #709ee3 100%);
      border-radius: 3px 3px 3px 3px;
      font-weight: 400;
      font-size: 12px;
      color: #002b4f;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 10px;
    }
  }
  div:hover {
    cursor: pointer;
  }
}
</style>
